<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function init() {
            var div = document.getElementById("src1");
            div.style.top = 0;
            div.style.left = 0;
            document.onkeydown = function (ev) {
                var newVar = window.event ? event : ev;
                switch (newVar.keyCode) {
                    case 38:
                        div.style.top = (parseInt(div.style.top) - 20) + "px";
                        break;
                    case 40:
                        div.style.top = (parseInt(div.style.top) + 20) + "px";
                        break;
                    case 37:
                        div.style.left = (parseInt(div.style.left) - 20) + "px";
                        break;
                    case 39:
                        div.style.left = (parseInt(div.style.left) + 20) + "px";
                        break
                }
            }


        }
    </script>
</head>
<body>
<img src="z1.gif" id="src1" onload="init()">
</body>
</html>